<template>
  <div>
    <el-form v-bind="ruleFormProps" :inline="true" :model="rulFormModel" class="demo-form-inline">
      <el-form-item v-for="item in ruleFormConfig" :key="item.prop" v-bind="item.formItemProps">
        <suspense>
          <component :is="componentReact[item.type]" :itemConfig="item" :rulFormModel="rulFormModel" @init-data="handleInit"> </component>
        </suspense>
      </el-form-item>
      <el-form-item v-if="showSearch">
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import BaseInput from '@/components/BaseForm/BaseComponents/BaseInput.vue';
import BaseSelect from '@/components/BaseForm/BaseComponents/BaseSelect.vue';
import BaseDatePicker from '@/components/BaseForm/BaseComponents/BaseDatePicker.vue';
import PageSelect from '@/components/BaseForm/BaseComponents/PageSelect.vue';
const { ruleFormConfig, ruleFormProps, rulFormModel } = defineProps({
  ruleFormConfig: Array,
  ruleFormProps: Object,
  rulFormModel: Object,
  showSearch: {
    type: Boolean,
    default: true
  }
});
const componentReact = {
  BaseInput,
  BaseSelect,
  BaseDatePicker,
  PageSelect
};
const formInline = reactive({
  user: '',
  region: '',
  date: ''
});

const onSubmit = () => {};
const emit = defineEmits(['handleQuery', 'resetQuery', 'initData']);
const handleQuery = () => {
  emit('handleQuery');
};
const resetQuery = () => {
  emit('resetQuery');
};
const handleInit = () => {
  emit('initData');
};
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
